<template>
	<Card>

		<p slot="title">
			表单管理
		</p>
		<a href="#" slot="extra" @click="addMenu">
			<Button type="primary" size="small">新增</Button>
		</a>

		<Row>
			<Col span="24">
			<Table border :context="self" :columns="columns4" :data="data1" @on-selection-change="selected"></Table>
			<Row class="page-distance">

				<Page :total="total" :current="page" :page-size="pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-sizer show-elevator show-total class="pageStyle"></Page>
			</Row>
			</Col>
		</Row>
		<!--新增-->
		<Modal v-model="addmodel" title="新增菜单" @on-ok="addsure('addInfo')">
			<Form :label-width="80" :rules="ruleInline" ref='addInfo' :model="addInfo">
				<Form-item label="表单名称" prop="name">
					<Input placeholder="请输入表单名称" v-model="addInfo.name"></Input>
				</Form-item>

				<Form-item label="上传HTML">
					<Upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="['html','HTML','HTM','htm']" :max-size="5120" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" action="http://192.168.1.169:8084/uploadHtml">
						<Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
					</Upload>
				</Form-item>

			</Form>

		</Modal>
		<!--修改-->
		<Modal v-model="updatemodel" title="新增菜单" @on-ok="sure">
			<Form :label-width="80">
				<Form-item label="表单名称">
					<Input placeholder="请输入表单名称" v-model="updatid"></Input>
				</Form-item>
				<Form-item label="表单名称">
					<Input placeholder="请输入表单名称" v-model="updatename"></Input>
				</Form-item>

			</Form>
		</Modal>
		<!--删除-->
		<Modal v-model="deletemodal" title="删除角色" @on-ok="okdelete">
				<Form>
					<Form-item style="display: none;">
						<Input placeholder="请输入账号" v-model="deleteval"></Input>
					</Form-item>
				</Form>
				确定删除？
			</Modal>
	</Card>

</template>

<script>
	import Config from '../../../config/config';
	import Request from '../../common/js/request';
	export default {

		mounted: function() {
			this.getTableDate();
		},
		data() {
			return {
				page: 1,
				pageSize: 10,
				total: 0,
				defaultList: [], //默认上传文件的钩子
				updatename: '',
				deleteval:'',
				updatid: '',
				deletemodal:false,//删除
				addInfo: {
					name: '',
				},
				htmlUrl: '',
				uploadList: [], //上传
				ruleInline: {
					name: [{
						required: true,
						message: '请输入表单名',
						trigger: 'blur'
					}],
				},

				addmodel: false, //addmodel弹出框
				updatemodel: false, //updatemodel修改弹出框
				self: this, //表单的局域
				columns4: [{
						title: '表单名称',
						render(row, column, index) {
							return row.form_name
						}
					},
					{
						title: 'URl',
						render(row, column, index) {
							return row.form_url
						}
					},
					{
						title: '操作',
						key: 'action',
						width: 200,
						align: 'center',
						render(row, column, index) {
							return `<i-button type="primary" size="small" @click="edit(row)"><Icon type="edit" style="font-size:20px;width:25px"></Icon></i-button>  <i-button type="error" size="small" @click="deletemodel(row)"><Icon type="ios-trash" style="font-size:20px;width:25px"></Icon></i-button>`;
						}
					}
				],
				data1: []
			}
		},
		methods: {
			okdelete(){
				this.remove(this.deleteval)
			},
			
			deletemodel(data){
				
				this.deletemodal=true;
				this.deleteval=data.form_id;
			},
			
			getTableDate() { 
				let that = this;
				Request.post(Config.api.getFormList,{
					pageNo: this.page,
					pageSize: this.pageSize,
				})
				.then((res)=>{ 
					console.info(res.data)
					if(res.data.flag) {
						that.total=res.data.obj.totalSize;
						that.$Message.success(res.data.message);
						that.data1 = res.data.obj.formPage
					} else {

						//that.$Message.error(isOk.message);
					}
				});
				
				/*let that = this;
				this.$http.post(Config.baes+Config.getFormList, {
					pageNo: this.page,
					pageSize: this.pageSize,
				}).then(function(response) {
					let data = response.data;
					if(data.flag) {
						that.$Message.success(data.message);
						that.data1 = data.obj.formPage
					} else {

						//that.$Message.error(isOk.message);
					}

				}, response => {

				});*/
			},
			//分页
		   changePage(page) {
				this.page = page;
				this.getTableDate();
			},
			changePageSize(pageSize) {
				this.pageSize = pageSize;
				this.getTableDate();
			},
		
			//文件上传之前的钩子
			handleBeforeUpload(res) {
				const check = this.uploadList.length < 5;
				if(!check) {
					this.$Notice.warning({
						title: '最多只能上传5个文件。'
					});
				}
				return check;
			},
			//上传文件成功的钩子
			handleSuccess(res, file, fileList) {
				//console.info(res.obj)
				// 因为上传过程为实例，这里模拟添加 url
				let path = "/ikingsrc/forms/";
				file.url = path + res.obj;
				file.name = res.obj.name;
				this.$refs.upload.fileList = fileList;
				this.htmlUrl = file.url;

			},
			//上传文件失败的钩子
			handleFormatError(file) {
				this.$Notice.warning({
					title: '文件格式不正确',
					desc: '文件 ' + file.name + ' 格式不正确，请上传 html 或 htm 格式的图片。'
				});
			},
			//允许上传文件的大小
			handleMaxSize(file) {
				this.$Notice.warning({
					title: '超出文件大小限制',
					desc: '文件 ' + file.name + ' 太大，不能超过 5M。'
				});
			},
			remove(index) {
				
				let that = this;
				this.$http.delete('http://192.168.1.169:8084/deleteForm/'+index).then(function(response) {
					let data = response.data;
					if(data.flag) {
						that.$Message.success(data.message);
						that.getTableDate(); //回调表格
					} else {
						that.$Message.error(isOk.message);
					}

				}, response => {

				});

				
			},
			edit(data) {
				console.info(data)
				this.updatid = data.form_id;
				this.updatename = data.form_name;
				this.updatemodel = true;
			},
			//选择
			selected: function(selection) {
				console.info(selection)
			},
			addMenu() {
				this.addmodel = true;
			},
			addsure(name) {
				let that = this;
				
				this.$refs[name].validate((valid) => {
					if(valid) {
						this.$http.post('http://192.168.1.169:8084/saveForm', {
							formurl: this.htmlUrl,
							formname: this.$refs.addInfo.model.name
						}).then(function(response) {
							let isOk = response.data;
							if(isOk.flag) {
								that.$Message.success(isOk.message);
								//this.addInfo.name = '';
								this.getTableDate(); //回调表格
							} else {

								//that.$Message.error(isOk.message);
							}

						}, response => {

						});

						//						console.info(this.$refs.addInfo.model.name)
					} else {
						this.$Message.error('表单验证失败!');
					}
				})

			},
			sure() {
				let that = this;

				this.$http.post('http://192.168.1.169:8084/updateFormName', {
					formName: this.updatename,
					formId: this.updatid
				}).then(response => {
					let isOk = response.data;
					console.info(isOk)
					if(isOk.flag) {
						that.$Message.success(isOk.message);
						that.updatename = '';
						this.getTableDate(); //回调表格
					} else {
						that.$Message.error(isOk.message);
					}

				}, response => {});

			},

		}
	}
</script>

<style>
	.ivu-modal-body {
		padding-bottom: 0px !important;
	}
	
	.ivu-form-item {
		margin-bottom: 14px !important;
	}
	
	.ivu-card-body {
		padding: 0px !important;
	}
	
	.page-distance {
		margin-top: 20px !important;
		margin-bottom: 20px !important;
		margin-left: 20px !important;
	}
</style>